// 0 . 默认头像
// 获取个人信息
axios
  .get('http://api-breakingnews-web.itheima.net/my/userinfo', {
    headers: {
      Authorization: localStorage.getItem('token'),
    },
  })
  .then(res => {
    let { user_pic } = res.data.data

    console.log('user_src', user_pic)

    if (user_pic) {
      $('#image').attr('src', user_pic)
      handleCropper()
    }
  })

function handleCropper() {
  // 1. 初始化裁剪插件
  let cropper = new Cropper($('#image')[0], {
    aspectRatio: 1, // 裁剪图层的横纵比例
    preview: $('.img-preview'), // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
  })

  // 2. 选择图片
  $('.select').on('click', () => {
    $('input[type=file]').click()
  })
  $('#file').on('change', e => {
    //  拿到第一张图片
    let file = e.target.files[0]
    //   把图片转化为url
    let url = URL.createObjectURL(file)
    // 替换
    cropper.replace(url)
  })

  // 3. 点击确认按钮上传
  $('.sure').on('click', () => {
    /**
     * 1. cropper 插件转化base64 的步骤
     */
    //1.1 格式转换
    let canvas = cropper.getCroppedCanvas({
      // 利用cropper的方法, 把裁剪区域输出到一个canvas标签上 // width和height是canvas标签的大小
      width: 100,
      height: 100,
    })
    //1.2 canvas图像 -> base64字符串
    let base64Str = canvas.toDataURL('image/jpg')
    //1.3 因为base64Str有一些特殊的符号, 前端要进行URL编码, 再传给后台(node+express)会进行URL解码
    base64Str = encodeURIComponent(base64Str)

    let data = `avatar=${base64Str}`
    axios
      .post('http://api-breakingnews-web.itheima.net/my/update/avatar', data, {
        headers: {
          Authorization: localStorage.getItem('token'),
        },
      })
      .then(res => {
        console.log('更新 图片:', res)

        window.parent.mg_getUserInfo()
      })
  })
}
